component.buttons

buttons

Stroke buttons
Circle Buttons
Circle Stroke
Regular buttons
Buttons + Icons
Double buttons
Double Stroke
<div class="text-center separator bottom ui">
	
	<div class="row">
		<div class="col-md-6">
			
			<div class="innerAll">
				<h5 class="strong">Stroke buttons</h5>
				<button class="btn btn-primary btn-stroke">Primary</button>
				<button class="btn btn-inverse btn-stroke">Inverse</button>
				<button class="btn btn-danger btn-stroke">Danger</button>
				<button class="btn btn-success btn-stroke">Success</button>
				<button class="btn btn-warning btn-stroke">
					Warning</button>
				<button class="btn btn-info btn-stroke">Info</button>
			</div>

			<div class="innerAll">
				<h5 class="strong">Circle Buttons</h5>
				<button class="btn btn-circle btn-default"><i class="fa fa-home"></i></button>
				<button class="btn btn-circle btn-primary"><i class="fa fa-lock"></i></button>
				<button class="btn btn-circle btn-info"><i class="fa fa-google-plus"></i></button>
				<button class="btn btn-circle btn-inverse"><i class="fa fa-user"></i></button>
				<button class="btn btn-circle btn-danger"><i class="fa fa-trash-o"></i></button>
				<button class="btn btn-circle btn-warning"><i class="fa fa-linkedin"></i></button>
				<button class="btn btn-circle btn-success"><i class="fa fa-twitter"></i></button>
			</div>

			<div class="innerAll">
				<h5 class="strong">Circle Stroke</h5>
				<button class="btn btn-stroke btn-circle btn-primary"><i class="fa fa-lock"></i></button>
				<button class="btn btn-stroke btn-circle btn-info"><i class="fa fa-google-plus"></i></button>
				<button class="btn btn-stroke btn-circle btn-inverse"><i class="fa fa-user"></i></button>
				<button class="btn btn-stroke btn-circle btn-danger"><i class="fa fa-trash-o"></i></button>
				<button class="btn btn-stroke btn-circle btn-warning"><i class="fa fa-linkedin"></i></button>
				<button class="btn btn-stroke btn-circle btn-success"><i class="fa fa-twitter"></i></button>
			</div>

		</div>
		<div class="col-md-6">
			
			<div class="innerAll">
				<h5 class="strong">Regular buttons</h5>
				<button class="btn btn-default">Default</button>
				<button class="btn btn-primary">Primary</button>
				<button class="btn btn-inverse">Inverse</button>
				<button class="btn btn-danger">Danger</button>
				<button class="btn btn-success">Success</button>
				<button class="btn btn-warning">Warning</button>
			</div>

			<div class="innerAll">
				<h5 class="strong">Buttons + Icons</h5>
				<button class="btn btn-default"><i class="fa fa-home"></i> Default</button>
				<button class="btn btn-primary"><i class="fa fa-lock"></i> Primary</button>
				<button class="btn btn-inverse"><i class="fa fa-user"></i> Inverse</button>
				<button class="btn btn-danger"><i class="fa fa-trash-o"></i> Danger</button>
				<button class="btn btn-success"><i class="fa fa-twitter"></i> Success</button>
			</div>

		</div>
	</div>
	<div class="separator"></div>

	<div class="innerAll">
		<h5 class="strong">Buttons + Dropdowns</h5>
		<div class="btn-group">
			<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				Dropdown Default
			    <span class="caret"></span>
			</button>
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div>
		<div class="btn-group">
			<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
				Dropdown Primary
			    <span class="caret"></span>
			</button>
			<ul class="dropdown-menu pull-right">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div>
		<div class="btn-group">
			<button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown">
				Dropdown Inverse
			    <span class="caret"></span>
			</button>
			<ul class="dropdown-menu pull-right">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div>
		<div class="btn-group">
			<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
				Dropdown Danger
			    <span class="caret"></span>
			</button>
			<ul class="dropdown-menu pull-right">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div>
		<div class="btn-group">
			<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
				Dropdown Success
			    <span class="caret"></span>
			</button>
			<ul class="dropdown-menu pull-right">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div>
		<div class="btn-group">
			<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
				Dropdown Warning
			    <span class="caret"></span>
			</button>
			<ul class="dropdown-menu pull-right">
				<li><a href="#">Action</a></li>
				<li><a href="#">Another action</a></li>
				<li><a href="#">Something else here</a></li>
				<li class="divider"></li>
				<li><a href="#">Separated link</a></li>
			</ul>
		</div>
	</div>
	<div class="separator"></div>

	<div class="innerAll">
		<h5 class="strong">Double buttons</h5>
		<button class="btn btn-default btn-icon-stacked"><i class="fa fa-2x fa-facebook"></i> <span>Join using your<br/>Facebook Account</span></button>
		<button class="btn btn-primary btn-icon-stacked"><i class="fa fa-2x fa-twitter"></i> <span>Join using your<br/>Twitter Account</span></button>
		<button class="btn btn-inverse btn-icon-stacked"><i class="fa fa-2x fa-google-plus"></i> <span>Join using your<br/>Google Account</span></button>
		<button class="btn btn-danger btn-icon-stacked"><i class="fa fa-2x fa-facebook"></i> <span>Join using your<br/>Facebook Account</span></button>
		<button class="btn btn-success btn-icon-stacked"><i class="fa fa-2x fa-facebook"></i> <span>Join using your<br/>Facebook Account</span></button>
		<button class="btn btn-warning btn-icon-stacked"><i class="fa fa-2x fa-facebook"></i> <span>Join using your<br/>Facebook Account</span></button>
	</div>
	<div class="separator"></div>

	<div class="innerAll">
		<h5 class="strong">Double Stroke</h5>
		<button class="btn btn-stroke btn-primary btn-icon-stacked"><i class="fa fa-2x fa-twitter"></i> <span>Join using your<br/>Twitter Account</span></button>
		<button class="btn btn-stroke btn-inverse btn-icon-stacked"><i class="fa fa-2x fa-google-plus"></i> <span>Join using your<br/>Google Account</span></button>
		<button class="btn btn-stroke btn-danger btn-icon-stacked"><i class="fa fa-2x fa-facebook"></i> <span>Join using your<br/>Facebook Account</span></button>
		<button class="btn btn-stroke btn-success btn-icon-stacked"><i class="fa fa-2x fa-facebook"></i> <span>Join using your<br/>Facebook Account</span></button>
		<button class="btn btn-stroke btn-warning btn-icon-stacked"><i class="fa fa-2x fa-facebook"></i> <span>Join using your<br/>Facebook Account</span></button>
	</div>
	<div class="separator"></div>
	
</div>
<div class="separator bottom"></div>




Code

@import "assets/components/modules/admin/ui/buttons/assets/buttons.less";
@import "assets/components/modules/admin/tables/classic/assets/less/tables.less";
@import "assets/components/core/less/widgets.less";
@import "http://localhost/shared/components/modules/admin/tables/responsive/assets/custom/less/tables-responsive.less";

Usage

  1. Create a new LESS file (eg. styles.less)
  2. Copy & paste the above imports in the LESS file.
  3. Place the file in your project's document root.
  4. Load the LESS file into the <head> section of your HTML document, before any JavaScript files:

    <link type="stylesheet/less" href="styles.less" />

    NOTE  All the styles from the CORE package also need to be imported in this file, before the component imports.

  5. If you'd like to include other components on the same page, don't create multiple LESS files, but add all the imports in one file. You can create a LESS file for each page with just the resources used for that specific page, or you could create and use a single LESS file for the entire project.
  6. In production, compile the LESS file and use the resulting minified CSS file in the HTML document.